<template>
  <div class="gantt-table">
    <div class="gantt-head">
      <div class="gantt-fixed">
        <div>
          {{
            `${new Date(choiceTime[0]).format('yyyy-MM-dd')}
          -
          ${new Date(choiceTime[1]).format('yyyy-MM-dd')}`
          }}
        </div>
        <!-- 比例操作按钮 -->
        <div class="action-btn">
          <div class="action-item" :class="{ 'active': scaleWidth == 1.5 }" @click="changeScale(1.5)">150%</div>
          <div class="action-item" :class="{ 'active': scaleWidth == 1 }" @click="changeScale(1)">100%</div>
          <div class="action-item" :class="{ 'active': scaleWidth == 0.5 }" @click="changeScale(0.5)">50%</div>
        </div>
      </div>
    </div>
    <div class="gantt-box">
      <div class="left" ref="left">
        <div class="head">
          <div class="head-box">
            <GanttRow>
              <GanttBlock>置顶</GanttBlock>
              <GanttBlock>id</GanttBlock>
            </GanttRow>
          </div>
        </div>
        <div class="set-top-left">
          <GanttRow v-for="(item, index) in setTopGanttData" :overActive="false" :key="index" :style="{
            height: item.height + 'px',
          }">
            <GanttBlock>
              <span class="text-btn" @mousedown.stop="() => { }" @click="setTopOrCancel(item.id)">{{
                `${isSetTop(item.id) ?
                  '取消' : '置顶'}` }}</span>
            </GanttBlock>
            <GanttBlock>{{ item.id }}</GanttBlock>
          </GanttRow>
        </div>
        <div class="left-box" :style="{ transform: `translateY(-${transFormYValue}px)` }">
          <!--虚拟列表padding展位 虚假的padding-top-->
          <div class="virtual-padding" :style="{ height: virtual.paddingTop + 'px' }"></div>
          <GanttRow v-for="(item, index) in virtualYGanttData"
            :dragEndActive="dragEndActive.id === item.id && nowSuck.id !== dragEndActive.id"
            :rowActive="nowSuck.id === item.id" :isLeft="true" :overActive="overActionLeft"
            @mouseDownDefault="mouseDownDefault(item)" @mouseOverLeftDefault="mouseOverLeftDefault(item)"
            @mouseDownUpDefault="mouseDownUpDefault" :key="index" :style="{
              height: item.height + 'px',
            }">
            <GanttBlock>
              <span class="text-btn" @mousedown.stop="() => { }" @click="setTopOrCancel(item.id)">{{
                `${isSetTop(item.id) ?
                  '取消' : '置顶'}` }}</span>
            </GanttBlock>
            <GanttBlock>{{ item.id }}</GanttBlock>
          </GanttRow>

          <!--虚拟列表padding展位 虚假的padding-bottom-->
          <div class="virtual-padding" :style="{ height: virtual.paddingBottom + 'px' }"></div>
        </div>
      </div>
      <div class="right" ref="right">
        <div class="head">
          <div class="head-box">
            <GanttRow :style="{ transform: `translatex(-${transFormXValue}px)` }" class="transition-transForm">
              <GanttTimeBlock :scaleWidth="scaleWidth" :target-time="item.format('yyyy-MM-dd')"
                v-for="(item, index) in choiceTimeArr" :key="index"></GanttTimeBlock>
            </GanttRow>
          </div>
        </div>
        <div class="content" ref="actionArea">
          <div class="set-top-right" :style="{ transform: `translateX(-${transFormXValue}px)` }" ref="topRight">
            <div class="gantt-grid" :style="{
              'width': `${ganttGridBlockWidth * 8 * choiceTimeArr.length * scaleWidth}px`
            }">
              <!-- block => 180  因为timeBlock => 60    60*3 = 180px  -->
              <!-- 总长度为 180 *  24 / 3 *  choiceTimeArr.length -->
              <GanttRow v-for="item in setTopGanttData" :key="item.id" class="gantt-row-relative"
                :overActive="overAction" :topActive="isSetTop(item.id)" @mouseOverDefault="() => rowMouseOver(item)"
                :rowActive="nowSuck.id === item.id" :style="{
                  backgroundSize: `${ganttGridBlockWidth * scaleWidth}px ${item.height}px`,
                  height: item.height + 'px',
                }">
                <template v-if="item[timeBlockCol]">
                  <!--可操作模块-->
                  <action-block enableDragSide enableDragFree v-for="times in virtualXGanttBlockData(item)"
                    :scaleWidth="scaleWidth" :key="times.id" :actionArea="actionArea" :blockData="times"
                    :defaultTop="defaultTop" :defaultTimeBlockHeight="defaultTimeBlockHeight" :ganttData="ganttData" :rowData="item" :startTimeCol="startTimeCol"
                    :endTimeCol="endTimeCol" :timeBlockCol="timeBlockCol"
                    @moveSideDown="doLineDown"
                    @moveSideChange="() => doLineUp(item)" @onActionBlockDown="() => doActionBlockDown(item)"
                    :choiceTime="choiceTime">
                    <slot name="timeBlock" :data="{row: item, time: times}"></slot>
                  </action-block>
                </template>
              </GanttRow>
            </div>
          </div>
          <div class="content-box" ref="contentGrid">
            <div class="gantt-grid" :style="{
              'width': `${ganttGridBlockWidth * 8 * choiceTimeArr.length * scaleWidth}px`
            }">
              <!--虚拟列表padding展位 虚假的padding-top-->
              <!-- block => 180  因为timeBlock => 60    60*3 = 180px  -->
              <!-- 总长度为 180 *  24 / 3 *  choiceTimeArr.length -->
              <div class="virtual-padding" :style="{ height: virtual.paddingTop + 'px' }"></div>
              <GanttRow v-for="item in virtualYGanttData" :key="item.id" class="gantt-row-relative"
                :dragEndActive="dragEndActive.id === item.id && nowSuck.id !== dragEndActive.id"
                :overActive="overAction" @mouseOverDefault="() => rowMouseOver(item)"
                :rowActive="nowSuck.id === item.id" :style="{
                  backgroundSize: `${ganttGridBlockWidth * scaleWidth}px ${item.height}px`,
                  height: item.height + 'px',
                }">
                <template v-if="item[timeBlockCol]">
                  <!--可操作模块-->
                  <action-block enableDragSide enableDragFree v-for="times in virtualXGanttBlockData(item)"
                    :scaleWidth="scaleWidth" :key="times.id" :actionArea="actionArea" :blockData="times"
                    :defaultTop="defaultTop" :defaultTimeBlockHeight="defaultTimeBlockHeight" :ganttData="ganttData" :rowData="item" :startTimeCol="startTimeCol"
                    :endTimeCol="endTimeCol" :timeBlockCol="timeBlockCol"
                    @moveSideDown="doLineDown"
                    @moveSideChange="() => doLineUp(item)" @onActionBlockDown="() => doActionBlockDown(item)"
                    :choiceTime="choiceTime">
                    <slot name="timeBlock" :data="{row: item, time: times}"></slot>
                  </action-block>
                </template>
              </GanttRow>

              <!--虚拟列表padding展位 虚假的padding-bottom-->
              <div class="virtual-padding" :style="{ height: virtual.paddingBottom + 'px' }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, provide, reactive, nextTick,toRef } from 'vue';
import ActionBlock from './actionBlock.vue';
import GanttBlock from './ganttBlock.vue';
import GanttRow from './ganttRow.vue';
import GanttTimeBlock from './ganttTimeBlock.vue';

const emit = defineEmits(['handleComplete'])

const props = defineProps({
  // 甘特图时间范围 长度最多2
  dateArr: {
    type: Array,
    default: () => []
  },
  // 甘特图传入的数据
  ganttOriginData: {
    type: Array,
    default: () => []
  },
  // 开始时间字段
  startTimeCol: {
    type: String,
    default: 'startTime'
  },
  // 结束时间字段
  endTimeCol: {
    type: String,
    default: 'endTime'
  },
  // 时间条字段
  timeBlockCol: {
    type: String,
    default: "timeBlock"
  },
  // 甘特条向上的间隙
  defaultTop: {
    type: Number,
    default: 10
  },
  // 甘特条默认的高度
  defaultTimeBlockHeight: {
    type: Number,
    default: 40
  }
    
})

// 甘特图中网格背景一个格子的宽度
const ganttGridBlockWidth = 180

// 甘特数据
const ganttData = ref([]);

const contentGrid = ref(null);
const actionArea = ref(null);
const left = ref(null);
const topRight = ref(null);

//选择的时间区间
const choiceTime = ref([]);


// 收缩比例 1为100%
const scaleWidth = ref(1)

const nowSuck = ref({
  id: null,
});

const dragEndActive = ref({
  id: null
})

const overAction = ref(false);

// left专用
const overActionLeft = ref(false);

//用right 的滚动，控制aside-left的滚动
const transFormYValue = ref(0);
//用right 的滚动，控制head-left的滚动
const transFormXValue = ref(0);
// 占位
const virtual = ref({
  paddingTop: 0,
  paddingBottom: 0,
});

// 置顶的数据,但前y轴数据id（rowId）
const setTopRowIdArr = ref([]);

// y轴展示数组 存放rowId
const virtualYArr = ref([]);

// x轴展示数组 存放timeBlockId
const virtualXArr = ref([]);

// 特殊的虚拟列表xArr 的id
const specialTimeBlockId = ref(null)

//通过选择的时间区间，得到这区间之间的数组
const choiceTimeArr = computed(() => {
  let timeArr = [];
  //时间戳毫秒为单位
  //尾时间-首时间 算出头尾的时间戳差  再换算成天单位                                   毫秒->分->时->天
  let diffDays = (new Date(choiceTime.value[1]).getTime() - new Date(choiceTime.value[0]).getTime()) / 1000 / 60 / 60 / 24;

  //一天的时间戳
  let oneDayMs = 24 * 60 * 60 * 1000;
  //差了多少天就便利多少天 首时间+当前便利的天数的毫秒数
  for (let i = 0; i < diffDays + 1; i++) {
    //时间戳来一个相加，得到的就是时间数组
    timeArr.push(new Date(new Date(choiceTime.value[0]).getTime() + i * oneDayMs));
  }
  return timeArr;
});

// 是否置顶
const isSetTop = computed(() => {
  return (v) => {
    return setTopRowIdArr.value.indexOf(v) > -1;
  };
});

// 置顶数组，置顶数组不需要Y轴虚拟列表优化
const setTopGanttData = computed(() => {
  const setTopList = ganttData.value.filter((e) => setTopRowIdArr.value.indexOf(e.id) > -1);
  return setTopList;
});
const noSetTopGanttData = computed(() => {
  const setTopList = ganttData.value.filter((e) => setTopRowIdArr.value.indexOf(e.id) === -1);
  return setTopList;
});

// virtualXArr 有值 那就是 x轴要渲染的数据
// 用于虚拟列表展示的航班列表
const virtualXGanttBlockData = computed(() => {
  return (row) => {
    return row[props.timeBlockCol].filter((e) => virtualXArr.value.indexOf(e.id) > -1);
  };
});

// virtualYArr 有值 那就是 y轴要渲染的数据
// 不存在setTopRowIdArr中
// 用于虚拟列表展示的ganttData
const virtualYGanttData = computed(() => {
  let virtualList = noSetTopGanttData.value.filter((e) => virtualYArr.value.indexOf(e.id) > -1);
  // 虚拟列表中用于展示的部分
  return virtualList;
});
// 每一行底线的位置
const getRowPosition = computed(() => {
  let offsetTopArr = [];
  const showArr = noSetTopGanttData.value;
  for (let i = 0; i < showArr.length; i++) {
    //上一个高度
    let lastHeight = offsetTopArr[i - 1];
    if (!lastHeight) {
      lastHeight = 0;
    }
    //当前高度
    const currentHeight = showArr[i].height;
    offsetTopArr.push(lastHeight + currentHeight);
  }
  return offsetTopArr;
});
// 甘特图的长度
const ganttHeight = computed(() => {
  // getRowPosition 的最后一个就是sum
  const all = getRowPosition.value[getRowPosition.value.length - 1]
  if (all) {
    return all
  }
  return 0;
});
// 甘特图可视高度
const viewHeight = computed(() => {
  const viewAll = virtualYGanttData.value.map((e) => e.height);

  //可视高度
  let viewSum = viewAll.reduce(function (prev, cur) {
    return prev + cur;
  }, 0);

  return viewSum || 0;
});
/**
 * 处理单条的航班的折叠
 * 这样在处理一个拖拽后的航班条的时候，就可以重新计算偏移了
 * @param yData y轴数据对象，其中包括当前对象下的航班条
 */
const handleSingleFold = (yData) => {
  let timeBlockList = yData[props.timeBlockCol];
  // 数据重置
  for (let i = 0; i < timeBlockList.length; i++) {
    timeBlockList[i].tier = 1;
  }

  for (let i = 0; i < timeBlockList.length; i++) {
    const timeItem = timeBlockList[i];
    let originStart = new Date(timeItem[props.startTimeCol]).getTime();
    let originEnd = new Date(timeItem[props.endTimeCol]).getTime();

    const newList = timeBlockList.slice(0, i)
    // 这一行当前拥有的所有层级 去重
    const tierArr = Array.from(new Set(newList.filter((e) => e.tier).map((e) => e.tier))).sort((a, b) => a - b);

    //比对层级中是否有重叠，没有重叠则tier+1
    for (let j = 0; j < tierArr.length; j++) {
      const tier = tierArr[j];
      // 跟自己前面的对比
      const tierTimeData = newList.filter((e) => {
        return e.tier === tier
      });

      let realTier = null;
      for (let k = 0; k < tierTimeData.length; k++) {
        const diffTimeItem = tierTimeData[k];
        const diffTimeItemStart = new Date(diffTimeItem[props.startTimeCol]).getTime();
        const diffTimeItemEnd = new Date(diffTimeItem[props.endTimeCol]).getTime();

        if (
          (originStart > diffTimeItemStart && originStart < diffTimeItemEnd) ||
          (originStart < diffTimeItemStart && originEnd > diffTimeItemStart) ||
          ( originStart == diffTimeItemStart || originEnd == diffTimeItemEnd)
        ) {
          // 重叠 
          // 层级+1
          timeItem.tier = tier + 1;

        }
        realTier = timeItem.tier;
      }

      // 说明没有发生重叠 不然是不等的  既然发生了重叠，就不需要遍历下一个tier
      if (realTier == tier) {
        break;
      }
    }
    // 计算top + 最初顶上的高度
    let top = props.defaultTimeBlockHeight * (timeItem.tier - 1) + props.defaultTop * (timeItem.tier - 1) + props.defaultTop;
    timeItem.top = top;
  }

  //重新计算最高层级
  let tierMap = timeBlockList.map((e) => {
    return e.tier ? e.tier : 1;
  });

  let maxTier = tierMap.length > 0 ? Math.max(...tierMap) : 1;

  yData.height = maxTier * props.defaultTimeBlockHeight +  props.defaultTop * (maxTier + 1);
};

//滚动事件
const getScrollEvent = () => {
  let rightDom = contentGrid.value;
  rightDom.addEventListener('scroll', (e) => {
    let scrollLeft = e.target.scrollLeft;
    let scrollTop = e.target.scrollTop;
    transFormYValue.value = scrollTop;
    transFormXValue.value = scrollLeft;

    nextTick(() => {
      getVirtualYList();
      getVirtualXList();
    });
  });

  //左边滚动
  let leftDom = left.value;
  leftDom.addEventListener('mousewheel', (e) => {
    let wheelYValue = e.deltaY;
    let wheelXValue = e.deltaX;
    rightDom.scrollTop += wheelYValue;
    rightDom.scrollLeft += wheelXValue;
  });

  let topDom = topRight.value;
  topDom.addEventListener('mousewheel', (e) => {
    let wheelYValue = e.deltaY;
    let wheelXValue = e.deltaX;
    rightDom.scrollTop += wheelYValue;
    rightDom.scrollLeft += wheelXValue;
  });
};

// y轴虚拟列表
const getVirtualYList = () => {
  const rightDom = contentGrid.value;

  // 外框的高度
  const outerHeight = rightDom.clientHeight;

  const domScrollTop = rightDom.scrollTop;

  let startIndex = 0;

  let endIndex = 0;

  //虚假的占位设置
  //顶部的距离位置

  const sum = ganttHeight.value;

  //所有行的位置
  const rowHeightArr = getRowPosition.value;

  // 得到开始索引的位置
  for (let i = 0; i < rowHeightArr.length; i++) {
    let itemV = rowHeightArr[i];
    let lastV = rowHeightArr[i + 1];
    if (lastV) {
      if (domScrollTop > itemV && domScrollTop <= lastV) {
        startIndex = i + 1;
      }
    } else {
      if (domScrollTop > itemV) {
        startIndex = i;
      }
    }
  }

  // 当前结束所在的高度
  let endHeight = outerHeight + domScrollTop;

  // 得到结束的那行索引
  for (let i = 0; i < rowHeightArr.length; i++) {
    let itemV = rowHeightArr[i];
    let lastV = rowHeightArr[i + 1];
    if (lastV) {
      if (endHeight > itemV && endHeight < lastV) {
        endIndex = i + 1;
      }
    } else {
      if (endHeight > itemV) {
        endIndex = i;
      }
    }
  }

  //可见区域的数据
  let viewRowData = noSetTopGanttData.value.slice(startIndex, endIndex + 1);

  //复原
  virtualYArr.value = [];

  // 给viewRowData 添加isVirtual 属性
  for (let i = 0; i < viewRowData.length; i++) {
    virtualYArr.value.push(viewRowData[i].id);
  }

  const showAll = noSetTopGanttData.value.map((e) => e.height);

  // 距离顶部的高度 计算padding
  const topHeight = showAll.slice(0, startIndex).reduce((pre, cur) => {
    return pre + cur;
  }, 0);

  const realViewSum = viewHeight.value;

  // 距离底部的高度
  const bottomHeight = sum - topHeight - realViewSum;

  virtual.value.paddingTop = topHeight;

  virtual.value.paddingBottom = bottomHeight;

  emit('handleComplete')
};
// x轴虚拟列表
const getVirtualXList = () => {
  const rightDom = contentGrid.value;

  // 外框的宽度
  const outerWidth = rightDom.clientWidth;

  const domScrollLeft = rightDom.scrollLeft;

  const domEndSide = outerWidth + domScrollLeft;

  let allTime = [];

  //  拿到y轴虚拟列表的所有时间条和置顶中的所有时间条   （不直接去ganttData只是为了减少遍历）
  let yData = virtualYGanttData.value;
  let topData = setTopGanttData.value;

  for (let i = 0; i < yData.length; i++) {
    const item = yData[i][props.timeBlockCol];
    allTime.push(...item);
  }

  for (let i = 0; i < topData.length; i++) {
    const item = topData[i][props.timeBlockCol];
    allTime.push(...item);
  }

  let virtualTime = [];

  for (let i = 0; i < allTime.length; i++) {
    const item = allTime[i];
    // 1分钟 = 1px
    const startLeft = (new Date(item[props.startTimeCol]).getTime() - new Date(choiceTime.value[0]).getTime()) / 1000 / 60 * scaleWidth.value;
    const endLeft = (new Date(item[props.endTimeCol]).getTime() - new Date(choiceTime.value[0]).getTime()) / 1000 / 60 * scaleWidth.value;

    if (
      // 条比视窗大
      (domScrollLeft >= startLeft && domEndSide <= endLeft) ||
      // 条正好在视窗里面
      (domScrollLeft <= startLeft && domEndSide >= endLeft) ||
      // 条的前头在视窗外，后头在视窗里
      (domScrollLeft >= startLeft && domScrollLeft < endLeft) ||
      // 条的后头在视窗外，前头在视窗里
      (domEndSide > startLeft && domEndSide <= endLeft)
    ) {
      virtualTime.push(item.id);
    }
  }
  if(specialTimeBlockId.value) {
    virtualTime.push(specialTimeBlockId.value)
  }
  virtualXArr.value = virtualTime;

  emit('handleComplete')
};

//加载数据
const getData = () => {

  let arr = props.ganttOriginData

  //在此处进行防重叠计算
  arr.forEach((big) => {
    //对每一条计算层级
    handleSingleFold(big);
  });
  ganttData.value = arr;

  nextTick(() => {
    getVirtualYList();
    getVirtualXList();
  });
};

//时间条拉伸 松开鼠标
const doLineUp = (v) => {
  handleSingleFold(v);
  nextTick(() => {
    getVirtualYList();
    getVirtualXList();
    specialTimeBlockId.value = null
  });
};


// 时间条拉伸 摁下鼠标
const doLineDown = (timeItem) => {
  const id = timeItem.id
  specialTimeBlockId.value = id
}



const doActionBlockDown = () => {
  overAction.value = true;
};

const rowMouseOver = (row) => {

  overAction.value = true;

  nowSuck.value = JSON.parse(JSON.stringify(row));
};


// 左栏鼠标摁下
const mouseDownDefault = (row) => {
  overActionLeft.value = true
  nowSuck.value = JSON.parse(JSON.stringify(row));
}

// 左栏鼠标over
const mouseOverLeftDefault = (row) => {
  dragEndActive.value = JSON.parse(JSON.stringify(row));
}

const mouseDownUpDefault = () => {
  overActionLeft.value = false
  //nowSuck 与 dragEndActive 进行置换
  const startId = nowSuck.value.id
  const targetId = dragEndActive.value.id

  if (startId === targetId) {
    nowSuck.value.id = null
    dragEndActive.value.id = null
    return
  }

  const startIndex = ganttData.value.findIndex(e => e.id === startId)
  ganttData.value.splice(startIndex, 1)
  const targetIndex = ganttData.value.findIndex(e => e.id === targetId)
  ganttData.value.splice(targetIndex, 1)

  ganttData.value.splice(targetIndex, 0, JSON.parse(JSON.stringify(nowSuck.value)))
  ganttData.value.splice(startIndex, 0, JSON.parse(JSON.stringify(dragEndActive.value)))


  nowSuck.value.id = null
  dragEndActive.value.id = null
  nextTick(() => {
    getVirtualYList()
    getVirtualXList();
  })
}


//时间块移动后鼠标松开，进行磁性吸附
const doFreeMoveUp = (obj, row) => {
  overAction.value = false;

  //如果nowSuck为-1 说明没有进行移动
  if (nowSuck.value.id == null) {
    return;
  }

  // 操作的这个块，在row中的位置 仅用于删除用
  const timeIndex = row[props.timeBlockCol].findIndex((e) => e.id === obj.id);

  //原数据删除
  row[props.timeBlockCol].splice(timeIndex, 1);

  //防碰撞渲染
  handleSingleFold(row);

  // 当前nowSuck 是 json化后的
  // 需要取得 与 ganttData有关联的哪个 nowSuck数据
  const targetRow = ganttData.value.find((e) => e.id === nowSuck.value.id);

  if (row.id === targetRow.id) {
    // 如果是同行，延续排序
    targetRow[props.timeBlockCol].splice(timeIndex, 0, obj)
  } else {

    // 将数据插到指定位置
    const nowStartTime = new Date(obj[props.startTimeCol]).getTime()
    let addIndex = null
    for (let i = 0; i < targetRow[props.timeBlockCol].length; i++) {
      const timeItem = targetRow[props.timeBlockCol][i]
      const targetTime = new Date(timeItem[props.startTimeCol]).getTime()
      if (targetTime > nowStartTime) {
        addIndex = i
        targetRow[props.timeBlockCol].splice(addIndex, 0, obj)
        break;
      }
    }

    // 代表 这个航班条里面 没有比要放置的这个航班条小的条
    if (addIndex === null) {
      targetRow[props.timeBlockCol].push(obj)
    }
  }

  //防碰撞渲染
  handleSingleFold(targetRow);
  //时间块重新部署完成，nowSuck重置
  nowSuck.value.id = null;

  nextTick(() => {
    getVirtualYList();
    getVirtualXList();
  });
};

// 置顶
const setTopOrCancel = (rowId) => {
  const isTop = isSetTop.value(rowId);
  if (isTop) {
    const delIndex = setTopRowIdArr.value.indexOf(rowId);
    setTopRowIdArr.value.splice(delIndex, 1);
  } else {
    setTopRowIdArr.value.push(rowId);
  }
  nextTick(() => {
    getVirtualYList();
  });
};

// 更改比例
const changeScale = (scale) => {
  scaleWidth.value = scale
  nextTick(() => {
    getVirtualXList();
  });
}

provide(
  'onActionBlockUp',
  reactive({
    changeEvent: (param) => {
      doFreeMoveUp(param.blockData, param.rowData);
    },
  })
);

provide('scrollLeftRef', toRef(transFormXValue));


const draw = () => {
  choiceTime.value = [
    new Date(new Date(props.dateArr[0]).setHours(0, 0, 0, 0)),
    new Date(new Date(props.dateArr[1]).setHours(0, 0, 0, 0))
  ]
  //开始滚动交互事件
  getScrollEvent();
  getData();
}

defineExpose({
  draw
})


</script>
<style lang="scss" scoped>
.gantt-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .gantt-head {
    width: 100%;
    padding: 10px 15px;
    font-weight: bold;
    color: $tableHeadColor;
    background-color: #efefef;

    .gantt-fixed {
      display: flex;
      justify-content: space-between;

      .action-btn {
        display: flex;

        .action-item {
          margin-right: 10px;
          cursor: pointer;

          &.active {
            background-color: rgb(144, 149, 160);
          }
        }
      }
    }
  }

  .gantt-box {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;

    .left {
      width: $leftSideWidth;
      overflow: hidden;
      position: relative;
      z-index: 3000;

      .head {
        height: $tableHeadHeight;
        position: relative;
        z-index: 3;

        .head-box {
          background-color: $tableHeadColor;
          height: $tableHeadHeight;
          color: $tableHeadFontColor;
          width: 100%;
        }
      }

      .left-box {
        background-color: $tableLeftColor;
      }

      .set-top-left {
        position: relative;
        z-index: 500;
        background-color: $tableRowSetTopLeftColor;
      }
    }

    .right {
      flex: 1;
      min-width: 0;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .head {
        height: $tableHeadHeight;

        .head-box {
          overflow: hidden; //transform 移动出的东西 隐藏
          box-sizing: border-box;
          color: $tableHeadFontColor;
          background-color: $tableHeadColor;
          height: $tableHeadHeight;
          z-index: 2;
        }
      }

      .content {
        flex: 1;
        height: 100%;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .set-top-right {
          font-size: 0;
          position: relative;
          z-index: 4;
        }

        .content-box {
          height: 100%;
          min-height: 0;
          position: relative;
          flex-shrink: 0;
          flex: 1;
          overflow: auto;
        }

        .gantt-grid {
          display: inline-block;
          overflow: hidden;
        }

        .gantt-row-relative {
          position: relative;
          transition: background-color 0.2s;

          background-image: linear-gradient(to right, $tableBorderColor 1px, transparent 1px),
            linear-gradient(to bottom, $tableBorderColor 1px, transparent 1px);
          background-position: 1px -1px;
        }
      }
    }
  }
}


.text-btn {
  cursor: pointer;
}
</style>